<template>
    <div class="user">
        <h3>当前在线用户</h3>

        <p class="user-item" v-for="(item, index) in props.users" :key="index">
            <a-avatar :style="{ backgroundColor: getRandomColor() }">{{ item.userName[0] }}</a-avatar>
            <span class="user-name">{{ item.userName }}</span>
            <div class="operation">
                <a-button v-if="item.userId !== socketStore.userId" type="text" @click="onCall(item.userId, item.userName)"
                >发起聊天</a-button
            >
            <span v-else style="user-select: none;">我</span>
            </div>
        </p>
    </div>
</template>

<script setup lang="ts">
import { getRandomColor } from "../../utils";
import { useSocketStore } from "../../stores/imsocket";

const emits = defineEmits(["call"]);
const props = defineProps({
    users: Array<{
        userName: string;
        userId: string;
    }>
});
const socketStore = useSocketStore();

const onCall = (id: string, name: string) => {
    emits("call", { id, name });
};
</script>

<style scoped lang="scss">
.user {
    width: 50%;
    height: calc(100vh - 136px);
    padding-top: 12px;
    h3 {
        margin-bottom: 20px;
    }
    .user-item {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-bottom: 12px;
        margin-bottom: 12px;
        border-bottom: 1px solid #e8e8e8;
        .user-id {
            margin-left: auto;
        }
        .user-name {
            margin-right: auto;
            margin-left: 12px;
        }
        .operation {
            width: 100px;
            display: flex;
            justify-content: center;
            span {
                font-weight: 600;
                color: #9aa7b1;
            }
            .ant-btn {
                font-weight: 600;
                color: #5aa4ae;
            }
        }
    }
}
@media (max-width: 1200px) {
    .user {
        width: 100%;
    }
}
</style>
